<template>
    <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            拖拽文件 或者 <em>点击上传</em>
        </div>
        <template #tip>
        </template>
    </el-upload>

    <el-scrollbar class="h-full">
        <!-- <el-upload action="#" list-type="picture-card" v-model:file-list="fileList" :auto-upload="false" multiple :limit="9"
            :on-exceed="handleExceed" class="mt-2">
            <el-icon>
                <Plus />
            </el-icon>

            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload> -->
    </el-scrollbar>

    <el-dialog v-model="dialogVisible" width="100%" title="视频播放" center>
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn, UploadFilled } from '@element-plus/icons-vue'

import { uploadApi } from '@/api/upload.api'
import { categoryTreeApi } from '@/api/category.api'

const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const props = ref({
    value: 'id',
    label: 'name'
})

const categoryList = ref([])
const categoryTree = ref([])

onMounted(() => {

})

const handleExceed = () => {
    ElMessage.info('最多可选9张图片')
}

const handleRemove = (file) => {
    console.log(file, file.uid)
    console.log(fileList.value)
    let fl = fileList.value.filter(v => v.uid !== file.uid);
    fileList.value = fl
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const handleDownload = (file) => {
    console.log(file)
}

const onSubmit = () => {
    let categoryId = categoryList.value[categoryList.value.length - 1]
    console.log(categoryList.value)
    console.log(categoryId)
    console.log(fileList.value)
    if (categoryList.value.length <= 0) {
        ElMessage.info('请选择类别')
        return
    }
    if (fileList.value.length <= 0) {
        ElMessage.info('请选择文件')
        return
    }
    ElMessageBox.confirm(
        '确认要上传吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '等等',
            type: 'info',
        }
    ).then(async () => {
        console.log(fileList.value)
        const loadingInstance = ElLoading.service({ fullscreen: true, text: '文件上传中...', background: '#000' })
        const res = await uploadApi(categoryId, fileList.value)
        loadingInstance.close()
        if (res.code === 0) {
            fileList.value = []
            ElMessage.success('上传成功')
        } else {
            ElMessage.error('上传失败：' + res.message)
        }
    })
}
</script>

<style scoped>
::v-deep .el-upload.el-upload--picture-card {
    --el-upload-picture-card-size: 128px;
}

::v-deep .el-upload-list--picture-card {
    --el-upload-list-picture-card-size: 128px;
}
</style>